<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地应用-图片切换</title>
    <style type="text/css">
        #mast {
            background-color: rgb(201, 201, 201);
        }

        .center {
            text-align: center;
        }

        .header {
            background-image: url("./images/header.png");
            height: 180px;
            width: 100%;
            position: relative;
        }

        .header img {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .title {
            font-size: 20px;
            color: rgb(253, 248, 241);
            margin: 10px;
        }

        .center .rotation {
            position: relative;
            padding: 20px;
            background-color: white;
        }

        .left {
            position: absolute;
            top: 440px;
            left: 250px;
        }

        .right {
            position: absolute;
            top: 440px;
            right: 250px;
        }
    </style>
</head>
<body>
<div id="mast">
    <div class="center">
        <h2 class="header">
            <!--logo-->
            <img src="./images/bilibili.png" alt="" class="img_left">
        </h2>
        <h1 class="title">
            哔哩哔哩 相册 (゜-゜)つロ 干杯~-bilibili
        </h1>
        <!--图片-->
        <img class="rotation" :src="imgArr[index]" height="540" width="960"/>

        <!--左箭头-->
        <a @click="prev" v-show="index!=0" href="javascript:void(0)" class="left">
            <img src="./images/prev.png" alt="">
        </a>
        <a @click="next" v-show="index!=imgArr.length-1" href="javascript:void(0)" class="right">
            <img src="./images/next.png" alt="">
        </a>
    </div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#mast",
        data: {
            imgArr: [
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
                "./images/05.jpg",
                "./images/06.jpg",
                "./images/07.jpg",
                "./images/08.jpg",
                "./images/09.jpg",
                "./images/10.jpg",
            ],
            index: 0
        },
        methods: {
            prev: function () {
                this.index--
            },
            next: function () {
                this.index++
            }
        }
    })
</script>
</body>
</html>
